<template>
  <div class="card_wrap">
    <!-- 卡片标题 -->
    <div class="card_head">
      <div class="head_title">场景类型</div>
      <svg-icon class="head_action" icon-class="close" @click="closeForm" />
    </div>
    <div class="content_wrap">
      <!-- 卡片操作 -->
      <div class="card_name">
        <div class="name_title">
          <el-input
            v-model="inputSearch"
            placeholder="搜索"
            prefix-icon="el-icon-search"
            @input="inputChange"
            :clearable="true"
          >
          </el-input>
        </div>
        <div class="name_action">
          <el-button type="primary" size="mini" round @click="clearChecked"
            >清空
          </el-button>
          <el-button type="primary" size="mini" round @click="updateTypeList"
            >选择
          </el-button>
        </div>
      </div>
      <!-- 卡片内容 -->
      <div class="card_content">
        <!-- 类型列表 -->
        <div class="card_list">
          <div class="first_list">
            <div
              v-for="(item, index) in filterTypeList"
              :key="index"
              :class="[
                selectedFistTypeIndex === index
                  ? 'first_item_checked'
                  : 'first_item',
              ]"
              @click="choseFirstType(index)"
            >
              {{ item.type_name }}
            </div>
          </div>
          <div style="flex: 1; overflow: scroll">
            <div
              v-if="filterTypeList[selectedFistTypeIndex]"
              class="second_list"
            >
              <div
                v-for="(subItem, index) in filterTypeList[selectedFistTypeIndex]
                  .scene"
                :key="index"
                class="second_item"
                :class="{
                  second_item_checked: subItem.checked,
                  second_item_selected: subItem.is_select === 0,
                }"
                @click="setSecondType(subItem)"
                @mouseover="mouseover(subItem)"
                @mouseleave="mouseleave()"
              >
                {{ subItem.scene_name }}({{ subItem.scene_num }})
              </div>
            </div>
            <div v-else class="no_type_wrap">
              <div class="no_type_text">暂无数据</div>
            </div>
          </div>
        </div>
        <!-- 案例 -->
        <div class="issue_case">
          <div class="case_title">案例</div>
          <div class="case_photo">
            <el-image
              class="image"
              :src="
                selectedIssue.example_img ===
                'http://fsimage.guihuao.com/geodata/png/file_2023_07_01_16_02_10_a55e6114.png'
                  ? noPicThumb
                  : selectedIssue.example_img
              "
            />
            <div
              class="case_photo_half"
              v-show="selectedIssue.scene_describe == '请选择场景类型'"
            >
              <el-image
                v-if="default_logo"
                class="default_logo"
                :src="default_logo"
              />
              <el-image v-else class="image" :src="initThumb" />
            </div>
          </div>
          <div class="case_content">
            {{ selectedIssue.scene_describe || issueDemo }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IssueTypeCard",
  props: {
    typeList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      localTypeList: null,
      selectedSecTypeList: [],
      selectedFistTypeIndex: 0,
      selectedFistTypeName: "",
      selectedIssue: null,
      initThumb: require("@/assets/default_demo.png"),
      noPicThumb: require("@/assets/404_images/no_pic.png"),
      issueDemo: "请选择场景类型",
      inputSearch: "",
      default_logo: "",
    };
  },
  computed: {
    filterTypeList() {
      if (!this.inputSearch) {
        return this.typeList;
      } else {
        return JSON.parse(JSON.stringify(this.typeList)).filter((group) => {
          group.scene = group.scene.filter((item) => {
            return (
              item.scene_name.includes(this.inputSearch) ||
              item.key_word.includes(this.inputSearch)
            );
          });
          return group.scene.length > 0;
        });
      }
    },
  },
  watch: {
    typeList: {
      handler: function (newVal) {
        // console.log('debug06279', JSON.parse(JSON.stringify(newVal)))
        // if (!this.typeList) return

        this.formatList(JSON.parse(JSON.stringify(newVal)));
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.selectedIssue = {
      example_img: require("@/assets/default_demo.png"),
      scene_describe: "请选择场景类型",
    };
    var config = this.$store.getters.kanBanConfig;
    this.default_logo = config.logo;
    console.log("默认信息", config);
  },
  mounted() {},
  methods: {
    formatList(issueTypeList) {
      if (!issueTypeList || issueTypeList.length === 0) return;
      if (this.localTypeList) {
        this.localTypeList.forEach((item, index) => {
          item.scene.forEach((subItem, subIndex) => {
            // subItem.checked = (subItem.is_select === 1)
            subItem.scene_num = issueTypeList[index].scene[subItem].scene_num;
          });
        });
      } else {
        issueTypeList.forEach((item, index) => {
          item.selected = index === 0;
          item.scene.forEach((subItem) => {
            subItem.checked = subItem.is_select === 1;
          });
        });
        this.localTypeList = issueTypeList;
      }
    },
    closeForm() {
      this.$emit("closeIssueMenu");
      // 恢复标签状态
      // this.selectedSecTypeList.push({
      //   scene_id: subItem.scene_id,
      //   state: subItem.checked
      // })
      this.selectedSecTypeList.forEach((aimType) => {
        this.typeList.forEach((firstType) => {
          firstType.scene.forEach((secType) => {
            if (secType.scene_id === aimType.scene_id) {
              secType.checked = aimType.state;
            }
          });
        });
      });
      this.selectedSecTypeList = [];
      this.$forceUpdate();
    },
    choseFirstType(index) {
      this.selectedFistTypeIndex = index;
      this.$forceUpdate();
    },
    setSecondType(subItem) {
      console.log("setSecondType", subItem);
      if (subItem.is_select === 0) {
        this.$message.info("缺少对应场景权限");
        return;
      }
      // 取消和选择操作
      subItem.checked = !subItem.checked;
      this.selectedSecTypeList.push({
        scene_id: subItem.scene_id,
        state: subItem.checked,
      });
      //
      this.typeList.forEach((group) => {
        if (group.type_name === subItem.type_name) {
          group.scene.forEach((item) => {
            if (item.scene_name === subItem.scene_name) {
              item.checked = subItem.checked;
            }
          });
        }
      });
      this.$forceUpdate();
    },
    mouseover(subIssue) {
      this.selectedIssue = subIssue;
      console.log("mouseover", this.selectedIssue);
    },
    mouseleave() {
      this.selectedIssue = {
        example_img: require("@/assets/default_demo.png"),

        scene_describe: "请选择场景类型",
      };
      console.log("mouseleave", this.selectedIssue);
    },

    clearChecked() {
      const menuList = [];
      console.log("updateTypeList", this.typeList);
      this.typeList.forEach((item) => {
        item?.scene.forEach((subItem) => {
          subItem.checked = false;
          // if (subItem.checked) {
          // }
        });
      });
      console.log("updateTypeList", menuList);
      this.updateTypeList();
      this.$forceUpdate();
      // // this.$bus.emit('updateTypeList', menuList)
      // this.$parent.updateRadioMenu(menuList)
    },

    updateTypeList() {
      const menuList = [];
      console.log("updateTypeList", this.typeList);
      // 返回已选中的类型
      this.typeList.forEach((item) => {
        item?.scene.forEach((subItem) => {
          if (subItem.checked) {
            menuList.push(subItem);
          }
        });
      });
      // 清空是返回默认类型
      const isClear = menuList.length === 0;
      if (menuList.length === 0) {
        console.log("tadsafasd1", this.typeList);
        this.typeList.forEach((item) => {
          item.scene.forEach((subItem) => {
            subItem.scene = subItem.scene_name;
            if (subItem.is_select === 1) {
              menuList.push(subItem);
            }
          });
        });
      }
      console.log("updateTypeList999", menuList);
      // // this.$bus.emit('updateTypeList', menuList)
      this.$parent.updateRadioMenu(menuList, isClear);
      this.$emit("closeIssueMenu");
      this.selectedSecTypeList = [];
    },
    //
    inputChange(val) {
      console.log("inputChange", val);
      this.selectedFistTypeIndex = 0;
    },
  },
};
</script>

<style scoped lang="scss">
.card_wrap {
  width: vw(400);

  color: whitesmoke;
  font-size: 13px;
  position: relative;
  background: rgba(5, 29, 40, 0.8);
  margin-top: -1px;
  border: 1px solid rgba(28, 193, 255, 0.2);
  //background-image: url('~@/assets/z2.png');
  //background-size: 100% vh(60);
  //background-repeat: no-repeat;
  //background-position: 0 vh(740);
  box-shadow: 0 0 vh(15) rgba(28, 193, 255, 0.4) inset;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .card_head {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 5px;
    //background-color: steelblue;
    background-image: linear-gradient(rgb(4, 80, 139) 48%, rgb(3, 40, 76) 58%);
    border-radius: 12px 12px 0 0;

    .head_title {
      font-size: 15px;
      pointer-events: none;
    }

    .head_action {
      position: absolute;
      right: 15px;
      margin: auto;
      cursor: pointer;
    }
  }

  .card_name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;

    .name_title {
      //pointer-events: none;
    }

    .name_action {
      .el-button {
        width: 52px;
        height: 24px;
        padding: 0;
        background-color: rgba(42, 112, 196, 1);
        border-color: rgba(42, 112, 196, 1);
      }
    }
  }

  .card_list {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    height: vh(290);

    .first_list {
      overflow: auto;
      display: flex;
      flex-direction: column;
      cursor: pointer;

      .first_item {
        padding: 12px 18px;
        border-bottom: grey 1px solid;
        border-right: grey 1px solid;
        background-color: rgba(101, 116, 137, 0.9);
      }

      .first_item_checked {
        padding: 12px 18px;
        border-bottom: grey 1px solid;
        border-right: grey 1px solid;
        background-color: rgba(63, 137, 157, 0.9);
      }
    }

    .second_list {
      overflow: auto;
      display: flex;
      flex-direction: row;
      align-items: flex-start;

      width: 100%;
      flex-flow: wrap;
      padding: 12px 15px;

      .second_item {
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        line-height: 14px;
        font-size: 12px;
        padding: 4px 8px;
        margin-right: 8px;
        margin-bottom: 6px;
        color: darkgrey;
        border-radius: 15px;
        border: rgba(60, 185, 185, 1) 1px solid;
      }

      .second_item:hover {
        background-color: #2a70c4;
        color: white;
        border: #2a70c4 1px solid;
      }

      .second_item_checked {
        font-size: 12px;
        padding: 4px 8px;
        margin-right: 8px;
        margin-bottom: 6px;
        border-radius: 15px;
        color: whitesmoke;
        background-color: rgba(60, 185, 185, 1);
        border: rgba(60, 185, 185, 1) 1px solid;
      }

      .second_item_selected {
        font-size: 12px;
        padding: 4px 8px;
        margin-right: 8px;
        margin-bottom: 6px;
        border-radius: 15px;
        color: whitesmoke;
        background-color: grey;
        border: grey 1px solid;
      }
    }

    .no_type_wrap {
      background: rgba(100, 100, 100, 0.4);
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .no_type_text {
        color: grey;
        font-size: vh(16);
      }
    }
  }

  .issue_case {
    flex: 1;
    background-color: rgba(200, 200, 200, 0.5);
    padding: 5px 10px;
    border-radius: 5px 5px 8px 8px;
    border-top: darkgrey 1px solid;

    .case_title {
      font-size: 13px;
      margin-bottom: 10px;
      text-align: start;
    }

    .case_photo {
      position: relative;
      .case_photo_half {
        position: absolute;
        background: #efefef;
        width: 100%;
        height: 61%;
        z-index: 10;
        top: 0;
        .default_logo {
          position: absolute;
          top: 60%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 30%;
        }
      }
      .image {
        width: 100%;
        height: auto;
        aspect-ratio: 33/25;
      }
    }

    .case_content {
      font-size: 14px;
      line-height: 20px;
      color: yellow;
      text-align: start;
    }
  }
}

.card_content {
  //background-color: rgba(105, 122, 135, 0.5);
  border-radius: 5px;
  border: darkgrey 1px solid;
}

.content_wrap {
  padding: 10px;
  //background-color: rgba(84, 101, 126, 0.5);
}

::v-deep .el-input__inner {
  background: rgba(173, 196, 207, 0.3);
  border: grey 1px solid;
  color: white;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  padding-right: 10px;
}

::v-deep .el-input-group__append {
  background: rgba(0, 170, 255, 0.3);
  border: grey 1px solid;
  padding: 0 10px;
}

::v-deep .el-input__icon {
  height: auto;
  line-height: 1;
  margin-top: 5px;
}
</style>
